.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* grid-auto-flow: column; 容器的子元素会按照顺序排列顺序 */
  /* grid-auto-flow: row; */
  /* 水平方向的子元素对齐 */
  /* justify-items: start; */
  /* justify-items: center; */
  /* justify-items: stretch; */
  /* grid-auto-rows: 50px; */
}

.item {
  font-size: 20px;
  /* width: 50px; */
  line-height: 100px;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

/* .item-8 {
  background-color: #d0e4a9;
  grid-row-start: 4;
  grid-column-start: 2;
}

.item-9 {
  background-color: #4dc7ec;
  grid-row-start: 5;
  grid-column-start: 3;
} */
